How To Create HTML Tables ? Uses Of tr td th caption Tages
CHAPTER – 5
The HTML table tag is used for arranging the data in the form of rows and columns, or possibly in a more complex structure. The HTML tables are created using the <table> tag in which the <th> tag is used for heading in the table row, <tr> tag is used to create table rows and <td> tag is used to create data under rows cells. The elements under <td> are regular and left aligned by default.
Defining tables in HTML
The HTML table is defined with the <table> tag. The Important tages should be follow while creating features of a table:
1. <tr> tag is used to define each row in a table.
2. <th> tag is used to define headers of a table and comes top of the table row.
3. <td> tag is used to define a table data or a cell.
By default, table headings are bold and centered aligned while data is non-bold and left aligned.
HTML: <caption> tag
The HTML <caption> tag defines the title of a table in the HTML document. Browsers traditionally render the text found in the <caption> tag above the table.
HTML Table Border
The html table tag does not show border by default. You can apply border around the table by using the HTML border attribute. You cab apply the width of the border using a number. For example, for a thin border, use the number "1". For a thicker border, use a greater number like 2,3,4.
The Background Property
The background property of the table is used to color the whole table , single row also even a cell.
Syntax
In HTML, the syntax for the <table> tag background color is:
<table bgcolor=”green”>
HTML Table Width
The width attribute specifies the width of a table or the width of a table cell. The width can be set either as an absolute value in pixels, or as in percentage (%). If the width attribute is not set, it will takes up the space of longest single word in each cell.
1. Table width in pixels
<table border=1 width=50>
Output according to pixels
2. Table width in percentage (%)
<table border=1 width=50%>
Output according to percentage
Now you can compare both pixel and percentage difference
Source Code of the HTML Table:
Output:
Example 1:
Question :- How to create an HTML program to show your biodata
which bold italic and font size font style?
<html>
<head>
<title>BioData</title>
</head>
<body>
<table width=60%
cellpadding=10% border=0>
<tr bgcolor=pink><td
colspan=2><center><font size=+3 color=green face="Arial
Rounded MT">BioData</center></td></tr>
<tr><td>Name</td><td><b>Ram
Kumar</b></td></tr>
<tr><td>Profile
Pic</td><td><img src="logopic.jpg" height=30
width=30></td></tr>
<tr><td>Father's
Name</td><td>Raj Kumar</td></tr>
<tr><td>Gender
</td><td>Male</td></tr>
<tr><td>Nationality</td><td>Indian</td></tr>
<tr><td>Address</td><td
color="red"><textarea rows=6 cols=20
style="background-color: #b6b7b4;">#1234,Sec
44-c,Chd</textarea></td></tr>
<tr><td>Education
Qulification</td>
<td><b><i>
<ol>
<li>10th from CBSE
Board</li>
<li>10+2 from CBSE
Board</li>
<li>BSc from Shimla
University</li>
<li>Msc from Shimla
University</li>
</i></b>
</ol>
</td></tr>
</table>
</body>
Note :
1.
Cellpadding
Means to increase the size of the cells.
2. Colspan
is used to merge columns
3.
Rowspan
is used to merge rows.
The output of the above HTML Code is:
Blog Disclaimer :
Post a Comment